<template>
	<div class="indeOut">
		<header class="head">
			<span class="left" @click="aa()"><img :src="fanhui" alt=""></span>
			<span class="center"></span>
			<span class="right"><img :src="fenxiang" alt=""></span>
		</header>
		<section>
			<div class="banner">
				<img :src="banne" alt="">
				<p>{{msg}}</p>
				<p><span>{{zuo}} | {{riqi}}</span></p>
			</div>
			<div class="dients" v-for="font in fonts">
				<p>{{font.text}}</p>
				<p><img :src="font.srcc" alt=""></p>
			</div>
			
			<p class="ppp">评论区</p>

		</section>
		<div class="foot">
			<span><input type="text" value="添加评论"></span>
			<span><img src="../../../static/img/ms.png" height="43" width="46" alt="">0</span>
			<span><img src="../../../static/img/zan.png" height="43" width="46" alt="">0</span>
			<span><img src="../../../static/img/xin-6.png" height="43" width="46" alt="">0</span>
		</div>
		

	</div>
</template>
<script>
import '../../assets/js/jquery.js';

	export default{
		
		name:'indeOut',
		data (){
			return{
				fanhui:'../../../static/img/fanhus.png',
				fenxiang:'../../../static/img/fenq.png',
				banne:'../../../static/img/peopers5_01.png',
				msg:'轻盈减脂蜂蜜芥末鸡肉沙拉',
				zuo:'作者：无人岛先生',
				riqi:'01.30',
				
				fonts:[
					{text:'猝不及防之时：'},
					{text:'遭遇到了赤裸裸的心与灵'},
					{srcc:'../../../static/img/peopers5_03.png'},
					{text:'猝不及防之时：'},
					{text:'遭遇到了赤裸裸的心与灵'},
					{text:'遇见'},
					{text:'OCT创意园的林荫小道'},
					{text:'随处可见的创意痕迹'},
					
					{text:'藏着很多有趣的店、有趣的人'},
					{text:'朋友都在讨论这周的三天假怎么玩'},
					{text:'让我不自觉地想起昨天去过的这家店'},
					{text:'PENNY BLACK'},
					{text:'黑邮票爵士咖啡'},
					{srcc:'../../../static/img/peopers5_06.png'},
					{text:'（世界上第一张邮票）'},
					{text:'对这家店，其实不算陌生'},
					{text:'早在去年年初，我和Michael有一段时间'},
					{text:'都被这里的爵士乐给迷住了'},
					{text:'一周来一次，一人两杯Gin Tonic'},
					{text:'可以坐一个晚上..'},
					{srcc:'../../../static/img/peopers5_09.png'},
					{text:'情怀/梦想'},
					{text:'昨天与朋友又来到了这家店'},
					{text:'这次很幸运能够和店里负责人'},
					{text:'—— “黑夜先生”，聊了一会'},
					{text:'黑邮票爵士咖啡'},
					{text:'从情怀/梦想与爵士乐'},
					{text:'到天花板的鼓与玩乐的酒'},
					{srcc:'../../../static/img/peopers5_11.png'},
					




































				],
				fas:[
					{fa:'制作方法：'},
					{fa:'1. 按包装指示烹饪鸡柳'},
					{fa:'2. 小碗混入芥末、蜂蜜和苹果醋，搅匀'},
					{fa:'3. 把长叶莴苣、牛油果、灯笼椒、圣女果和红洋葱放入大碗中，倒入芥末混合酱汁，搅拌使酱汁均匀覆盖在沙拉上。'},
					{fa:'4. 将调好味的沙拉分装到4个碟子中，把鸡柳切片等量放于每份沙拉上，即食。'}
					
					
				]
			}
		},
		methods:{
			aa(){
				this.$router.go(-1)
			}
		},
		mounted (){
			$(function() {
				$(window).scroll(function() {
					var singleHeight = $(this).height();
					var st = $(this).scrollTop();
					if (st > singleHeight ) {
						$('.head').stop().addClass('fixed').animate({top:0});
						console.log(st)			
					} else{
						$('.head').removeClass('fixed');
					}
				})
			})
		}
	}
</script>
<style scoped lang="less">
@import '../../assets/css/reset.css';

.px2rem(@name, @px){
    @{name}: @px / 75 * 1rem;
}
.flexbox{
	display: flex;
}
.height(@ht){.px2rem(height,@ht)}
.line-height(@arg){.px2rem(line-height, @arg);}
.font-size(@arg){.px2rem(font-size, @arg);}

.font(@fz,@color){
    .px2rem(font-size,@fz);
    color: @color;
}
.border-radius(@arg){.px2rem(border-radius, @arg);}

.padding-top(@top){.px2rem(padding-top, @top);}
.padding-right(@right){.px2rem(padding-right, @right);}
.padding-bottom(@bottom){.px2rem(padding-bottom, @bottom);}
.padding-left(@left){.px2rem(padding-left, @left);}

.margin-top(@top){.px2rem(margin-top, @top);}
.margin-right(@right){.px2rem(margin-right, @right);}
.margin-bottom(@bottom){.px2rem(margin-bottom, @bottom);}
.margin-left(@left){.px2rem(margin-left, @left);}

.head{
	.flexbox;
	.height(93);
	justify-content: space-between;
	align-items: center;
	position: fixed;
	top:0;
	//background: red;
	left:0;
	width:100%;
	.left,.right{
		.px2rem(width,100);
		text-align: center;
		img{
			.px2rem(width,56);
			.height(59);
		}
	}
	
}
.fixed{
		background: #000;
	}

section{

	.banner{
		
			img{
			width:100%;
		}
		p{
		text-align: center;
		.line-height(60);
		background: #fafafa;
		.font(25,#000);
		}
	}
	.dients{
		p{
			text-align: center;
			img{
				width:100%;
			}
			width:90%;
			margin: 0 auto;
			.font(25,#000);
			.line-height(50)
		}
	}
	.ppp{
		border-left: 8px solid #000;
		.height(43);
		.line-height(43);
		width:90%;
		margin: 0 auto;
		.padding-left(30);
	}
	.margin-bottom(82);
}
.foot{
	.height(82);
	.flexbox;
	align-items: center;
	justify-content: space-around;
	position: fixed;
	bottom:0;
	width: 100%;
	background: #fff;
	
	span{
		input{
			.height(55);
			background: #efefef;
			border: 1px solid #ccc;
			border:none;
			.px2rem(width,410);
		}
	}
}
</style>